<template>
  <div>
    <div class="outDiv">
      <div class="backToPer">
        <go-back></go-back>
      </div>
      <scroller lock-x>
        <div class="mainDiv">
          <!-- <div class="catalog_title">
            <div class="catalog_name">{{ catalogName }}</div>
            <div class="catalog_code">专业代码 {{ catalogCode }}</div>
          </div>-->
          <!-- <div class="chooseTab">
            <div :class="['marjors', tabItem == 1 ? 'active' : '']" @click="chooseTabItem(1)">专业列表</div>
            <div class="line">|</div>
            <div :class="['schools', tabItem == 2 ? 'active' : '']" @click="chooseTabItem(2)">推荐院校排名</div>
          </div>-->

          <!-- 专业列表 -->
          <ul class="major_lists">
            <li
        
              class="major_item"
              v-for="(item, index) of jobList"
              :key="index"
              @click="jumpToDetail(item.jobTitle)"
            >
              <div class="major_left">
                <div class="name">{{ item.jobTitle }}</div>
                <!-- <div class="code">{{ item.major_code }}</div> -->
              </div>
              <div class="major_right"></div>
            </li>
          </ul>
          <ul class="major_lists" v-if="listLength===0">
            <li class="major_item" style="border-bottom:none">
              <div class="major_left">
                <div class="name">暂无对应职位</div>
                <!-- <div class="code">{{ item.major_code }}</div> -->
              </div>
              <!-- <div class="major_right"></div> -->
            </li>
          </ul>

          <!-- 推荐院校列表 -->
          <!-- <ul class="school_lists" v-show="tabItem == 2">
            <li class="school_item" v-for="(item, index) of schools" :key="index" @click="jumpToUni(item.academy_code)">
              <div class="school_left">{{ item.academy_name }}</div>
              <div class="school_right">
                <span>{{ item.score }}</span>
                <img src="~/static/images/collage_icon_arrow_right.png" >
              </div>
            </li>
          </ul>-->
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import goBack from "~/components/goBack";
import {  getProfessionalList } from "~/api/evaluation";
import ls from "store2";
export default {
  components: {
    goBack
  },
  mounted() {
    this.getProfessionalList();
  },
  data() {
    return {
      jobList: [],
      listLength:null
    };
  },
  methods: {
    getProfessionalList() {
        this.$vux.loading.show()
      getProfessionalList(this.$route.query.jobName).then(res => {
        this.jobList = res.data;
        this.listLength =  res.data.length;
        this.$vux.loading.hide()
      }).catch(err=>{
        this.$vux.loading.hide()
      });
    },
    jumpToDetail(jobName) {
      this.$router.push({
        path:'detail',
        query:{
          jobName :jobName
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  /deep/ .top {
    background: #fff;
  }

  .backToPer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 100;
  }

  .mainDiv {
    padding-top: 0.8rem;

    .catalog_title {
      background: #fff;
      padding: 0.32rem;
      margin-bottom: 0.24rem;

      .catalog_name {
        color: #222;
        font-size: 0.36rem;
        line-height: 0.57rem;
        font-weight: bold;
        margin-bottom: 0.16rem;
      }

      .catalog_code {
        color: #999;
        font-size: 0.24rem;
        line-height: 0.33rem;
      }
    }

    .chooseTab {
      background: #fff;
      padding: 0.32rem;
      border-bottom: 1px solid #e5e8ed;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .marjors,
      .schools {
        color: #999;
        font-size: 0.3rem;
        line-height: 0.4rem;
        font-weight: normal;
      }

      .active {
        font-weight: bold;
        color: #80d566;
      }

      .line {
        margin: 0 0.32rem;
        color: #e5e8ed;
      }
    }

    .major_lists {
      background: #fff;
      padding: 0 0.32rem 1rem;

      .major_item {
        height: 1.12rem;
        line-height: 1.12rem;
        width: 100%;
        border-bottom: 1px solid #e5e8ed;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .major_left {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .name {
            color: #222;
            font-size: 0.32rem;
            font-weight: bold;
          }

          .code {
            color: #999;
            font-size: 0.26rem;
            margin-left: 0.24rem;
          }
        }

        .major_right {
          width: 0.4rem;
          height: 0.4rem;
          display: inline-block;
          background: url("~/static/images/collage_icon_arrow_right.png")
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .school_lists {
      background: #fff;
      padding: 0 0.32rem 1rem;

      .school_item {
        height: 1.12rem;
        line-height: 1.12rem;
        width: 100%;
        border-bottom: 1px solid #e5e8ed;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .school_left {
          color: #222;
          font-size: 0.3rem;
          font-weight: bold;
        }

        .school_right {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          span {
            color: #999;
            font-size: 0.26rem;
            margin-right: 0.16rem;
          }

          img {
            width: 0.4rem;
            height: 0.4rem;
          }
        }
      }
    }
  }
}
</style>
